*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  text-decoration: none;
}

@font-face{
  src: BARAJA BCS - WEB\BARAJA BCS - fuentes web\avenir\  ;
  font-family: avenir55;
}

@media screen and (max-width: 1000px){
  body{background-color: rgb(230, 230, 230) ;} 
}



/* seccion inicio */ 

.Inicio{
  position: relative;
  width: 100%;
}

#Superior_inicio{
  width: 90%;
  margin: 0px auto 0px auto;
  position: absolute;
  display: flex;
  left: 0px;
  right: 0px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.Boton_inicio{
  width: 150px;
  height: 150px;
  margin-top: 30px;
  text-shadow: rgb(0, 0, 0) 5px;
}

.Boton_inicio:hover{
  text-shadow: rgb(0, 0, 0) 20px;
}

.Botón_menú{
  width: 40px;
  height: 40px;
  top: 80px;
  right: 40px;
  text-shadow: rgb(0, 0, 0) 5px;
}

.Botón_menú:hover{
  text-shadow: rgb(0, 0, 0) 20px;
}

.video{
  position: relative;
  width: 100%;
  z-index: 0;   
}

  

/* seccion portafolio */ 

.Portafolio{
  width: 100%;
  display: flex;
  flex-direction: column;
}

#Superior_portafolio{
 width: 100%;
 top: 30px;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;
}

#Copy_la_degustacion{
 width: 70%;
}

#Copy_la_degustacion h1{
  display: block;
  margin-top: 20px;
  font-family: avenir55, sans-serif, Arial, Helvetica;;
  font-size: 40px;
  color:rgb(26, 26, 26);
}

#Copy_la_degustacion p{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  font-size: 20px;
  color:rgb(26, 26, 26);
}

.Galeria{
  width: 100%;
  margin-top: 40px;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: flex-start
}

.Img_galeria{
  width: 300px;
  margin-top: 20px;
}

.Botón_a_behance{
  width: 98%;
  margin-top: 30px;
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-end;
  text-shadow: rgb(0, 0, 0) 5px;
}

.Icono_mas{
  width: 80px;
  height: 80px;
}

/* seccion nosotros */ 

.Nosotros{
  position: relative;
  width: 100%;
}

#Superior_nosotros{
  width: 90%;
  margin: 0px auto 0px auto;
  position: absolute;
  display: flex;
  left: 0px;
  right: 0px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}



/* seccion corporativo x 4 */ 

.Bloque_corporativo{
  width: 100%;
  overflow-x: scroll;
}

.Bloque_container{
  width: 400%;
  display: flex;
}

.Corporativo{
  position: relative;
  width: 100%;
  display:flex;
}

.Imagen_corporativo{
  width: 50%;
}

.Foto_equipo{
  width: 100%;
}

.Bloque_derecho_corporativo{
  width: 50%;
  padding: 150px 80px 20px 80px;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.Boton_inicio_corporativo{
  margin-bottom: 30px;
  text-align: end;
}
.logo_corpotativo{
  width: 150px;
  height: 150px;
}
.Logo_corporativo:hover{
  text-shadow: rgb(0, 0, 0) 20px;
}

#Copy_corporativo{
  text-align: end;
}

#Copy_corporativo h1{
  display: block;
  margin-top: 20px;
  text-align: right;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 40px;
  color:rgb(26, 26, 26);
}

#Copy_corporativo p{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 30px;
  font-size: 20px;
  line-height: 25px;
  text-align: justify;
  color:rgb(153, 153, 153);
}

#Copy_corporativo a{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 12px;
  color:rgb(153, 153, 153);
}

#Copy_corporativo_pitch h1{
  display: block;
  margin-top: 20px;
  text-align: right;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 40px;
  color:rgb(26, 26, 26);
}

#Copy_corporativo_pitch p{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 20px;
  font-size: 17px;
  line-height: 18px;
  text-align: justify;
  color:rgb(153, 153, 153);
}
  
/* seccion Nuestros clientes */


.Nuestros_clientes{
  width: 100%;
  height: 274px;
  background-color: rgb(230, 230, 230);
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

#Copy_nuestros_clientes{
  width: 25%;
}

#Copy_nuestros_clientes h3{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 70px;
  font-size: 40px;
  color:rgb(26, 26, 26);
}

#Copy_nuestros_clientes p{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  margin-bottom: 50px;
  font-size: 18px;
  color:rgb(77, 77, 77);
}

body{
    margin: 0;
}
.Carete_logos_nuestros_clientes {
    width: 60%;

    overflow: hidden;
}
.Carete_logos_nuestros_clientes ul {
    display: flex;
    padding: 0;
    width: 90cm;
    animation: cambio 15s infinite;
    animation-direction: alternate;
    }

.Carete_logos_nuestros_clientes li{
    width: 100%;
    list-style: none;
    }

 .Carete_logos_nuestros_clientes img {
     width: 170px;
     margin: 18px;
 }   
 @keyframes cambio {
     0% {margin-left:   0;}
     20% { margin-left: 0;}

     25% { margin-left: -100%;}
     45% {margin-left:  -100%;}

     50% {margin-left: -200%;}
     70% {margin-left: -200%;}
    
     75% {margin-left: -300%;}
     100% {margin-left: -300%;}
 }




/* seccion Servicios */

#Servicios{
   width: 100%;
}

#Superior_servicios{
  width: 100%;
  top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

#Boton_inicio{
  margin-top: 30px;
  text-shadow: rgb(0, 0, 0) 5px;
}

#Boton_inicio:hover{
  text-shadow: rgb(0, 0, 0) 20px;
}

#Copy_lo_que_mejor_hacemos{
  width: 70%;
}

#Botón_menú{
  top: 80px;
  right: 40px;
  text-shadow: rgb(0, 0, 0) 5px;
}

#Descripción_servicios{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
}

.servicios{
  left: 400px;
  padding: 60px 30px;
  justify-content: space-evenly;
  align-items: stretch;
}

#Servicios h1{
  display: block;
  margin-top: 20px;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 40px;
  color:rgb(26, 26, 26);
}

#Servicios p{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  font-size: 20px;
  color:rgb(26, 26, 26);
}

#Descripción_servicios h3{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  font-size: 25px;
  color:rgb(26, 26, 26);
}
  
#Descripción_servicios h4{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-bottom: 30px;
  font-size: 22px;
  color:rgb(153, 153, 153);
}

#Descripción_servicios h5{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 30px;
  font-size: 20px;
  color:rgb(26, 26, 26);
}

#Descripción_servicios p{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  font-size: 15px;
  color:rgb(26, 26, 26);
}



/* seccion Validadores */

.Validadores{
  width: 100%;
  height: 274px;
  background-color: rgb(230, 230, 230);
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

#Copy_validadores{
  width: 25%;
}

#Copy_validadores h3{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 70px;
  font-size: 40px;
  color:rgb(26, 26, 26);
}

#Copy_validadores p{
  display: block;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  margin-bottom: 50px;
  font-size: 18px;
  color:rgb(77, 77, 77);
}
  
#Bloque_logos_validadores{
  width: 65%;
  display: flex;
  flex-direction: row;
  display: block;
  justify-content: space-evenly;
}

.Logos_validadores{
  width: 200px;
}



/* seccion Contactanos */

.Contactanos{
position: relative;
width: 100%;
}

.Superior_contactanos{
  width: 100%;
  margin-top: 70px;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  z-index: 1;
}

#Copy_contactanos{
  width: 30%;
}

#Copy_contactanos h1{
  display: block;
  margin-top: 20px;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 40px;
  color:rgb(255, 255, 255);
  text-shadow: rgb(0, 0, 0) 5px;
}

#Copy_contactanos p{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  margin-top: 10px;
  font-size: 20px;
  line-height: 27px;
  color:rgb(255, 255, 255);
  text-shadow: rgb(0, 0, 0) 5px;
}

.Nav_formularios{
  width: 30%;
  margin: 20px;
  display: flex;
  justify-content: space-between;
}

.Botones_formularios{
width: 160px;
margin: 0px 10px 0 px 10px;
text-shadow: rgb(0, 0, 0) 5px;
}

.Inferior_contactanos{
  width: 100%;
  margin-top: 25px;
  padding: 0px 0px 10px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items:center;
}

.Boton_inicio_contactanos{
  width: 20%;
}

.Logo_contactanos{
  width: 160px;
  height: 160px;
}

#Logo_contactanos:hover{
  text-shadow: rgb(0, 0, 0) 20px;
}

#Bloque_derecha{
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items:center;
}
.Datos_contacto{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items:center;
}

.Iconos_contacto{
  width: 30px;
  margin: 3px;
}

#Con_enlace{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items:center;
}

#Bloque_derecha p{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 17px;
  line-height: 27px;
  color:rgb(77, 77, 77);
}
.Botones_contacto{
  width: 160px;
}

#Textos_legales{
  width: 60%;
  position: absolute;
  padding: 5px 0px 30px 0px;
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 14px;
  color:rgb(77, 77, 77);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#Textos_legales a{
  font-family: avenir55, sans-serif, Arial, Helvetica;
  font-size: 14px;
  color:rgb(77, 77, 77);
}




/* RESPONSIVE */

@media screen and (max-width: 500px){
  body{background-color: rgb(255, 255, 255) ;} 


  /* seccion Inicio */

   #Superior_inicio{
    position: fixed;
    width: 100%;
    height: 30px;
    margin: 10px 0px 0px 0px;
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
    display: flex;
    justify-content:space-between;
    align-items: center;
    z-index: 1;
  }


  #Boton_inicio {
    margin-top: 0;
  }

  .Boton_inicio{
    width: 40px;
    margin-top: 0px;
    margin-left: 20px;
    z-index: 2;
  }
  
  .Botón_menú{
    width: 25px; 
    margin-top: 0px;
    margin-right: 20px;
    z-index: 2;
  }

  /* seccion portafolio */
 
  .Portafolio{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #Superior_portafolio{
  width: 100%;
  top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  }

  #Superior_portafolio #Boton_inicio{
    display: none;
  }

  #Superior_portafolio #Botón_menú{
    display: none;
  }

  #Copy_la_degustacion{
  width: 90%;
  }

  #Copy_la_degustacion h1{
    margin-top: 20px;
    font-size: 20px;
  }

  #Copy_la_degustacion p{
    margin-top: 5px;
    text-align: justify;
    font-size: 16px;
    line-height: 20px;
    color:rgb(153, 153, 153);
  }

  .Galeria{
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .Img_galeria{
    width: 100px;
    margin: 4px;
  }

  .Botón_a_behance{
    width: 98%;
    margin-top: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
  }

  .Icono_mas{
    width: 30px;
    height: 30px;
  }



  /* seccion nosotros */ 
   
  #Superior_nosotros{
    display: none;
  }


  /* seccion corporativo x 4 */ 


  .Bloque_corporativo{
    width: 100%;
    overflow-x: scroll;
  }
  
  .Bloque_container{
    width: 400%;
    display: flex;
  }
  
  .Corporativo{
    position: relative;
    width: 100%;
    display:block;
    flex-wrap: wrap;
  }
  
  .Imagen_corporativo{
    width: 100%;
  }
  
  .Foto_equipo{
    width: 100%;
  }
  
  .Bloque_derecho_corporativo{
    width: 100%;
    padding: 50px 17px 30px 17px;
    display: flex;
    flex-direction: column;
    align-content: center;
  }
  
  .Boton_inicio_corporativo{
    display: none;
  }

  .logo_corpotativo{
    display: none;
  }

  .Logo_corporativo:hover{
    display: none;
  }
  
  #Copy_corporativo{
    text-align: end;
  }
  
  #Copy_corporativo h1{
    margin-top: 5px;
    font-size: 25px;
    }
  
  #Copy_corporativo p{
    margin-top: 8px;
    font-size: 16px;
    line-height: 20px;
    color:rgb(153, 153, 153);
  }
  
  #Copy_corporativo a{
    font-size: 10px;
    color:rgb(153, 153, 153);
  }
  
  #Copy_corporativo_pitch h1{
    margin-top: 5px;
    font-size: 25px;
  }
  
  #Copy_corporativo_pitch p{
    margin-top: 8px;
    font-size: 14px;
    line-height: 15px;
    color:rgb(153, 153, 153);
  }


  /* seccion Nuestros clientes */

  .Nuestros_clientes{
    width: 100%;
    height: 300px;
    padding: 0px 0px 20px 0px;
    height: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  
 #Copy_nuestros_clientes{
    width: 90%;
  }
  
  #Copy_nuestros_clientes h3{
    display: block;
    margin-top: 20px;
    font-size: 24px;
  }
  
  #Copy_nuestros_clientes p{
    display: block;
    margin-top: 5px;
    text-align: justify;
    font-size: 16px;
    line-height: 20px;
  }  

  .Carete_logos_nuestros_clientes {
    width: 90%;
  }

  .Carete_logos_nuestros_clientes img {
    width: 105px;
    margin: 5px;
  }   



    /* seccion Servicios */
  
  #Servicios{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
 
  #Superior_servicios{
    width: 100%;
    top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
 
  #Superior_servicios #Boton_inicio {
    display: none;
  }
 
  #Superior_servicios #Boton_inicio:hover{
    display: none;
  }
 
  #Superior_servicios #Botón_menú{
    display: none;
  }

  #Copy_lo_que_mejor_hacemos{
    width: 90%;
  }

  #Copy_lo_que_mejor_hacemos h1{
    margin-top: 20px;
    font-size: 20px;
  }

  #Copy_lo_que_mejor_hacemos p{
    margin-top: 5px;
    text-align: justify;
    font-size: 16px;
    line-height: 20px;
    color:rgb(153, 153, 153);
  }
 
 
  #Descripción_servicios{
    position: relative;
    width: 100%;
    margin: 20px 0px 30px 0px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
  }
 
  #Estrategia{
    width: 90%;
    margin-top: 15px;
    border: 1px  rgb(153, 153, 153);
    border-style: solid;
    border-radius: 0px 0px 15px 0px;
 
  }

  #Identidad{
    width: 90%;
    margin-top: 15px;
    border: 1px  rgb(153, 153, 153);
    border-style: solid;
    border-radius: 0px 0px 15px 0px;
  }

  #Gestión{
    width: 90%;
    margin-top: 15px;
    border: 1px  rgb(153, 153, 153);
    border-style: solid;
    border-radius: 0px 0px 15px 0px;
  }

  .servicios{
   left: 400px;
   border-top: 20px;
   padding: 40px 15px 30px 15px;
   justify-content: space-evenly;
   align-items: stretch;
  }
 
  #Servicios h1{
   display: block;
   margin-top: 20px;
   font-size: 25px;
   color:rgb(26, 26, 26);
  }
 
  #Servicios p{
   margin-top: 8px;
   font-size: 16px;
   color:rgb(153, 153, 153);
  }
 
  #Descripción_servicios h3{
   display: block;
   margin-top: 10px;
   font-size: 21px;
   color:rgb(26, 26, 26);
  }
   
  #Descripción_servicios h4{
   display: block;
   margin-bottom: 30px;
   font-size: 18px;
   color:rgb(153, 153, 153);
  }
 
  #Descripción_servicios h5{
   display: block;
   margin-top: 30px;
   font-size: 16px;
   color:rgb(26, 26, 26);
  }
 
  #Descripción_servicios p{
   display: block;
   margin-top: 10px;
   font-size: 15px;
   color:rgb(26, 26, 26);
  }
 
 

  /* seccion Validadores */

  .Validadores{
    display: none;
  }


  /* seccion Contactanos */

  
  .Contactanos{
    width: 100%;
    display: inline-block;
    flex-direction: column;
  }
   
  .Contactanos{
    position: relative;
    width: 100%;
  }

  .Superior_contactanos{
    width: 100%;
    background-color: rgb(107, 107, 107);
    position: relative;
    margin-top: 0px;
    padding: 40px 0px 25px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #Superior_contactanos{
    width: 100%;
    position: none;
    top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  #Video_acá_estamos{
    display: none;
  }

  #Copy_contactanos {
    width: 90%;
  }

  #Copy_contactanos h1{
    display: block;
    margin-top: 20px;
    font-size: 25px;
    color: rgb(255, 255, 255);
  }
    
  #Copy_contactanos p{
    margin-top: 8px;
    font-size: 16px;
    color:rgb(255, 255, 255);
  }
    
  .Nav_formularios{
    display: none;
  }
 
    
  .Inferior_contactanos{
    width: 90%;
    display: inline-block;
    margin-top: 0px;
    padding: 20px 0px 30px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center;
  }
    
  .Boton_inicio_contactanos{
    display: none;
  }          
  
  #Bloque_derecha{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
  }

  .Datos_contacto{
    padding: 0px 0px 5px 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
  }
    
  .Iconos_contacto{
    width: 20px;
  }
    
  #Con_enlace{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
  }
    
  #Bloque_derecha p{
    width: 70%;
    font-family: avenir55, sans-serif, Arial, Helvetica;
    font-size: 14px;
    line-height: 27px;
    color:rgb(77, 77, 77);
  }
    
  #Codigo_qr{
    display: none;
  }

  .Botones_contacto{
    width: 150px; 
    margin-top: 30px;   
  }

  #Textos_legales{
    width: 90%;
    position: absolute;
    padding: 15px 0px 35px 0px;
    font-size: 12px;
    color:rgb(77, 77, 77);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #Textos_legales p{
    font-size: 11px;
    color:rgb(77, 77, 77);
  } 
   
  #Textos_legales a{
    font-size: 11px;
    color:rgb(77, 77, 77);
  }
    
}

/* FINAL FINAL :) */